import { NavBar, Space, Toast } from "antd-mobile";
import { useEffect, useState } from "react";
import { SearchOutline, MoreOutline, CloseOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import style from "../css/allSort.module.scss";
import { AllSort } from "../Api";
export default () => {
  let Navigate = useNavigate();
  let [all, setAll] = useState([]);
  const back = () => Navigate("/");
  let sortData = async () => {
    let { data } = await AllSort();
    console.log(data.data.list);
    setAll(data.data.list);
  };
  useEffect(() => {
    sortData();
  }, []);
  return (
    <div>
      <div
        className={style.icon}
        onClick={() => {
          Navigate("/");
        }}
      >
        <div className="iconfont icon-shouye"></div>
      </div>
      <div className={style.top}>
        <NavBar onBack={back}>全部分类</NavBar>
      </div>
      <div className={style.con}>
        {all.map((item) => (
          <div key={item.id}>
            <h3>{item.name}</h3>
            <Space wrap className={style.content}>
              {item.tag_list.map((val) => (
                <div key={val.id} className={style.pic}>
                  <img src={val.image} alt="" />
                  <p>{val.name}</p>
                </div>
              ))}
            </Space>
          </div>
        ))}
      </div>
    </div>
  );
};
